<template>
  <div class="app-container" style="padding-top: 30px">
    <div class="options-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="addRoot()"
        >添加</el-button
      >
    </div>
    <div class="table-container">
      <tree-table :data="treedata" :columns="columns" border>
        <el-table-column
          label="模块地址"
          prop="url"
          width="100"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="权限码"
          prop="guid"
          width="150"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="模块状态" prop="state" width="80">
          <template slot-scope="scope">
            <span>{{ stateOptionsObj[scope.row.state] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time" width="150">
        </el-table-column>

        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="add(scope.row)"
              >新增子节点</el-button
            >
            <el-button type="success" size="mini" @click="edit(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" v-if="!scope.row.children" size="mini" @click="remove(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </tree-table>
    </div>
    <!-- 模块编辑弹框 -->
    <moduleEdit
      :show.sync="moduleEdit.show"
      :data="moduleEdit.data"
      @success="moduleEditSuccess"
    >
    </moduleEdit>
    <moduleAdd
      :show.sync="moduleAdd.show"
      :guid="moduleAdd.guid"
      :modulename="moduleAdd.moduleName"
      @success="moduleEditSuccess"
    >
    </moduleAdd>
  </div>
</template>

<script>
import treeTable from "@/components/TreeTable";
import g from "@/utils/utilFn";
import { getlist, remove_by_id, stateOptions } from "@/api/right_module";
import moduleEdit from "./components/moduleEdit";
import moduleAdd from "./components/moduleAdd";
export default {
  name: "moduleManage",
  components: { treeTable, moduleEdit, moduleAdd },
  data() {
    return {
      moduleEdit: {
        show: false,
        data: undefined,
      },
      moduleAdd: {
        show: false,
        guid: undefined,
        moduleName:"根目录"
      },
      columns: [
        {
          text: "模块名称",
          value: "module_name",
          width: 200,
        },
      ],
      treedata: [],
      stateOptionsObj: {},
    };
  },
  created() {
    this.stateOptionsObj = g.toObject(stateOptions, "key", "name");
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      getlist().then((response) => {
        this.treedata = g.T.toTree(response.data, "children", "guid", "pguid");
        console.log(this.list);
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      });
    },
    edit(row) {
      console.log(row);
      this.moduleEdit.show = true;
      this.moduleEdit.data = row;
    },
    add(row) {
      console.log(row);
      this.moduleAdd.show = true;
      this.moduleAdd.guid = row.guid;
      this.moduleAdd.moduleName =  row.module_name
    },
    addRoot(){
       this.moduleAdd.show = true;
      this.moduleAdd.guid = "";
      this.moduleAdd.moduleName =  "根目录"
    },
    remove(row) {
      this.$confirm(
        `此操作将永久删除【${row.module_name}】模块,\n删除该模块前，请得到开发者确认，\n是否继续删除?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          remove_by_id(row.id).then((response) => {
            if (response.data > 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
               this.getList();
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    moduleEditSuccess(new_row) {
      this.getList();
    },
  },
};
</script>
